<template>
  <hry-header title="找回密码" :showBackBtn="true">
    <div slot="content" class="login form-wrapper">
      <form novalidate @submit.prevent="validateBeforeSubmit">
        <md-field>
          <input-validate
            v-model="formData.phone"
            placeholder="请输入您的手机号"
            v-validate="'required|phone'"
            name="phone"
            type="phone"
            icon="iconshouji1"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="您的手机号"
            :error="errors.first('phone')"
          >
          </input-validate>
          <input-validate
            v-model="formData.imgcode"
            placeholder="输入您的图形验证码"
            type="digit"
            name="imgcode"
            rightType="1"
            :imgUrl="imgUrl"
            v-validate="'required|max:4'"
            icon="iconyanzhengma1"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="图形验证码"
            :error="errors.first('imgcode')"
            @changeImg="getImgCode"
          >
          </input-validate>
          <input-validate
            v-model="formData.code"
            placeholder="输入您的短信验证码"
            type="digit"
            name="code"
            rightType="2"
            icon="iconyanzhengma1"
            v-validate="'required|max:6'"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="短信验证码"
            :error="errors.first('code')"
            @sendCode="sendCode"
            ref="code"
          >
          </input-validate>
        </md-field>
        <a-button type="primary" block html-type="submit">下一步</a-button>
      </form>
    </div>
  </hry-header>
</template>

<script>
import { Field } from "mand-mobile";
import "@/assets/fonticon/iconfont.css";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("phone", "请输入正确的手机号");
export default {
  name: "index",
  components: {
    inputValidate,
    hryHeader: () => import("@/components/contentWrapper/index"),
    [Field.name]: Field
  },
  data() {
    return {
      formData: {
        phone: "",
        imgcode: "",
        code: ""
      },
      imgUrl: ""
    };
  },
  created() {
    this.getImgCode();
  },
  methods: {
    sendCode() {
      this.$validator
        .validateAll({
          phone: this.formData.phone,
          imgcode: this.formData.imgcode
        })
        .then(result => {
          if (result) {
            this.$ajax
              .post(this.$api.sendLoginCode, {
                mobile: this.formData.phone,
                code: this.formData.imgcode,
                type: "reset"
              })
              .then(() => {
                this.$refs.code.countdown();
              })
              .catch(err => {
                this.$message.error(err);
              });
          }
        });
    },
    getImgCode() {
      this.$ajax
        .post(this.$api.getImgCode, false, true)
        .then(res => {
          this.imgUrl = res.code;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$ajax
            .post(this.$api.judgeCode, {
              mobile: this.formData.phone,
              code: this.formData.code
            })
            .then(() => {
              sessionStorage.setItem("find", this.formData.phone);
              this.$router.push({ name: "resetPsw" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.login {
  height: 100%;
}
.form-wrapper {
  margin: 39px 40px;
  .link {
    font-size: 25px;
  }
  .ant-btn {
    margin-top: 117px;
    height: 75px;
    font-size: 30px;
  }
  .iconfont {
    .linear_gradient_back(#fad683, #f8962d, #ef8028);
    font-size: 36px;
    -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
    -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
  }
}
</style>
